4-2 扩展React17-18调试进阶（第三方方案&watch模式）
第三方调试方案详解
除了官方方案，社区中有一个更便捷的调试仓库，它预配置了完整的 VS Code 调试环境，支持直接对 React 源码设置断点。
环境搭建步骤
1. 下载调试仓库
从 Release 页面下载目标版本的压缩包（如 React 17.0.2），解压到本地。
2. 安装并启动
npm install
npm start
bash
项目会在 60001 端口启动一个本地 HTTP 服务，提供 React 示例页面。
3. 启动 VS Code 调试
调试配置已经预设在 .vscode/launch.json 中，点击 VS Code 左侧调试面板的启动按钮即可。在源码中需要研究的地方添加断点，刷新浏览器页面即可触发断点。
调试流程示意
浏览器访问 localhost:60001
↓
加载 React 示例页面
↓
触发 setState / render 等操作
↓
VS Code 断点命中
↓
单步跟踪 React 内部执行流程
text
Watch 模式
如果你需要修改 React 源码并实时查看效果，可以使用 watch 模式。Watch 模式会在源码修改后自动重新构建：
# 构建 React 源码（watch 模式）
yarn build --watch
bash
适用场景：
- 想要验证某个 Fiber 属性的作用
- 添加自定义的 console.log 到源码中
- 修改 Diff 算法的某个条件观察行为变化
常用调试技巧
1. 断点位置推荐
| 函数名 | 文件位置 | 适合观察 |
|---|---|---|
beginWork | react-reconciler/src/ReactFiberBeginWork.js | Fiber 工作入口 |
completeWork | react-reconciler/src/ReactFiberCompleteWork.js | Fiber 工作出口 |
commitMutationEffects | react-reconciler/src/ReactFiberCommitWork.js | DOM 变更提交 |
performUnitOfWork | react-reconciler/src/ReactFiberWorkLoop.js | 单个 Fiber 任务处理 |
scheduleUpdateOnFiber | react-reconciler/src/ReactFiberWorkLoop.js | 调度更新入口 |
2. 条件断点
在循环或递归中，使用条件断点只在特定条件下暂停：
// 例如：只在处理特定组件时暂停
fiber.type?.name === 'MyComponent'
text
3. Logpoints
不想暂停执行但想观察变量值时，使用 Logpoints 代替 console.log：
// Logpoint 表达式
`Processing fiber: ${fiber.type}, tag: ${fiber.tag}`
text
版本兼容性说明
| React 版本 | 调试方案 | 注意事项 |
|---|---|---|
| React 17 | 第三方仓库 + 官方方案 | 稳定，社区资料最多 |
| React 18 | 第三方仓库 + 官方方案 | 新增并发特性，需关注 Concurrent Mode |
| React 19 | 官方方案为主 | 新增 React Compiler（Rust），构建流程可能不同 |
↑